<template>
  <div class="box">
    <!-- 搜索页的搜索框 -->
    <form action="/">
      <van-search
        v-model="saerchValue"
        show-action
        :placeholder="hotWords"
        @search="onSearch"
        @cancel="onCancel"
        @input="OnInput"
      />
    </form>

    <!--  -->
    <HistoryHot
      v-if="isShowPage == 1"
      :historyKeywordList="historyKeywordList"
      :hotKeywordList="hotKeywordList"
      @tagClick="tagClick"
    />
    <SearchTipsList
      v-else-if="isShowPage == 2"
      :list="TipsList"
      @tagClick="tagClick"
    />
    <SearchProductList
      v-else-if="isShowPage == 3"
      :goodslist="goodslist"
      :filterCategory="filterCategory"
      @categoryChange="categoryChange"
      @pirceChange="pirceChange"
    />
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import HistoryHot from "@/components/searchpage/HistoryHot";
import SearchTipsList from "@/components/searchpage/SearchTipsList";
import SearchProductList from "@/components/searchpage/SearchProductList";
import {
  GetSreachHistroyData,
  GetSreachTipsData,
  GetGoodsListData,
} from "@/request/api";
export default {
  //   props: ["historyKeywordList", "hotKeywordList"],
  data() {
    return {
      //搜索框的值
      saerchValue: "",
      //提示热词-
      hotWords: "",
      // 控制页面显示对应的组件界面
      isShowPage: 1,
      //   搜索历史记录传值
      historyKeywordList: [],
      // 搜索关键热词传值
      hotKeywordList: [],
      // 搜索列表
      TipsList: [],
      // 产品列表
      goodslist: [],
      filterCategory: [],

      // 排列顺序，desc表示价格由高到低，asc表示价格由低到高
      order: "desc",
      //告诉后端以什么方式排序
      sort: "price",
      //告诉后端分类的Id
      categoryId: 0,
    };
  },
  created() {
    GetSreachHistroyData().then((res) => {
      console.log(res.data);
      this.saerchValue = res.data.defaultKeyword.keyword;
      this.historyKeywordList = res.data.historyKeywordList;
      this.hotKeywordList = res.data.hotKeywordList;
    });
  },
  methods: {
    ...mapMutations({
      chanisShowshadow: "Showshadow/chanisShowshadow",
    }),
    onSearch(value) {
      this.isShowPage = 3;
      // 回车时发起请求
      GetGoodsListData({
        keyword: value,
        order: this.order, //告诉后端是由高到底排序还是由低到高
        sort: this.sort, //告诉后端以什么方式排序
        categoryId: this.categoryId, //告诉后端分类的Id
      }).then((res) => {
        let { data, filterCategory } = res.data;
        this.goodslist = data;

        // 获取到数据的样子
        // {id: 0, name: "全部", checked: true}
        // {id: 1005001, name: "餐厨", checked: false}
        // {id: 1005000, name: "居家", checked: false}
        // {id: 1008000, name: "配件", checked: false}
        // {id: 1010000, name: "服装", checked: false}
        // {id: 1013001, name: "洗护", checked: false}
        // {id: 1011000, name: "婴童", checked: false}
        // {id: 1012000, name: "杂货", checked: false}
        // {id: 1005002, name: "饮食", checked: false}
        // {id: 1019000, name: "志趣", checked: false}

        // 我们需要的数据的样子
        // { text: "默认排序", value: "a" },
        // { text: "好评排序", value: "b" },
        // { text: "销量排序", value: "c" },
        let ret = filterCategory.map((item) => {
          return { text: item.name, value: item.id, checked: false };
        });

        this.filterCategory = ret;
        // console.log(res);
      });
      // console.log("执行了搜索", value);
    },
    // 点击取消时返回上一页
    onCancel() {
      this.$router.go(-1);
      this.chanisShowshadow(false);
    },

    OnInput(value) {
      this.isShowPage = 2;
      GetSreachTipsData({
        //本来传的是一个参数value值，但是因为api只是负责管理接口，就不方便把传递的参数写到那边去，所以直接在这边传一个参数对象过去
        keyword: value,
      }).then((res) => {
        // console.log(res.data);
        this.TipsList = res.data;
      });
    },
    // 分类请求
    categoryChange(id) {
      this.categoryId = id;
      // 发送请求
      this.onSearch(this.saerchValue);
    },
    // 价格排序请求
    pirceChange(val) {
      this.order = val;
      this.sort = "price";
      // 发送请求
      this.onSearch(this.saerchValue);
    },
    // 历史搜索记录请求
    tagClick(value) {
      this.onSearch(value);
    },
  },
  components: {
    HistoryHot,
    SearchTipsList,
    SearchProductList,
  },
};
</script>
 
<style lang = "less" scoped>
.box {
  position: absolute;
  width: 100%;
  min-height: 100%;
  top: 0;
  background-color: #efefef;
}
</style>